import React, { Component } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import * as types from './store/types'

/*
  redux异步处理-saga::
  1. cnpm i redux-saga
  2. 创建 api/pro.js 文件且封装数据请求方法
  3. 在 store 下面创建一个 mySaga.js 文件
  4. 在文件中定义两个异步方法，和一个监听函数 mySaga，且将 mySaga 导出
  5. 在 store/index.js 文件中，导入 mySaga 和创建中间件的方法
    a.import { applyMiddleware } from 'redux'
    b. import createSagaMiddleware from 'redux-saga'
    c. import mySaga from './mySaga'
    d. const sagaMiddleware = createSagaMiddleware()
    e. const store = createStore(reducer, applyMiddleware(sagaMiddleware))
    f. sagaMiddleware.run(mySaga)
  6. 在组件中触发 mySaga 中定义的事件

*/


class App extends Component {

  componentDidMount(){

    this.props.getBannerList()
    this.props.getProList()

  }

  render() {
    return (
      <div>
        {this.props.bannerList.map(item => {
          return (<p key={item.bannerid}>
            <img src={item.img} style={{height: 100}} alt="" />
          </p>)
        })}

        <ol>
          {this.props.proList.map(item => {
            return (<li key={item.proid}> {item.proname} </li>)
          })}
        </ol>


      </div>
    );
  }
}

// 将全局状态中的数据添加到 props 中
const mapStateToProps = (state)=>{
  return {
    bannerList: state.pro.bannerList,
    proList: state.pro.proList
  }
}

// 将修改全局状态的方法添加到 props
const mapDispatchToProps = (dispatch)=>{
  return {
    getBannerList(){
      //  调用 saga 中定义的方法
      dispatch({type: types.REQUEST_BANNER_LIST})
    },
    getProList(){
      // 执行 mySaga 中监听的事件
      dispatch({type: types.REQUEST_PRO_LIST, payload: {limitNum: 5}})
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);
